import React, { Component } from 'react';
import { SearchBar, Grid, List } from 'antd-mobile';
import { withRouter, Link } from "react-router-dom";
import Swiper from '../../components/swiper/index';
import Http from '../../axios/http';
import API from '../../api/index';
import TarBar from '../tarBar/index';
import './index.scss';

// 输入框
class Search extends Component {
    // static propTypes = {
    //     history: PropTypes.object.isRequired
    // }
    state = {
        value: '',
    };
    onChange = (value) => {
        this.setState({ value });
    };
    clear = () => {
        this.setState({ value: '' });
    };
    handleClick = () => {
        this.manualFocusInst.focus();
    }
    render() {
        return (
            <div>
                <SearchBar
                    value={this.state.value}
                    placeholder="Search"
                    onSubmit={value => console.log(value, 'onSubmit')}
                    onClear={value => console.log(value, 'onClear')}
                    onFocus={() => console.log('onFocus')}
                    onBlur={() => console.log('onBlur')}
                    onCancel={() => console.log('onCancel')}
                    showCancelButton
                    onChange={this.onChange}
                />
                <Swiper />
            </div>);
    }
}


class GridExample extends Component {

    constructor(props) {
        super(props);
        this.state = {
            disabled: false,
        }

    }
    componentDidMount() {
        console.log()
    }
    render() {
        let arrData = [];
        // this.props.imgList.map((item, i) => {
        //     let obj = {
        //         icon: `${window.location.protocol}//${window.location.hostname}:3000/${item.logo}`,
        //         text: item.hobby,
        //         id: item._id
        //     }
        //     return arrData.push(obj);
        // })
        return (
            <div>
                <List renderHeader={() => this.props.text} className="my-list">
                </List>
                <ul className="slide-left clearfix">
                    {
                        (this.props.imgList && this.props.imgList.length) ? this.props.imgList.map((item, i) => {
                            return <li key={i}>
                                <Link to={`/Home/${item._id}`}>
                                    <img src={`${window.location.protocol}//${window.location.hostname}:3000/${item.logo}`} alt="" />
                                </Link>
                            </li>
                        }) : []
                    }
                </ul>
            </div>
        )
    }
}
// 使用高阶组件withRouter  否则this.props.history.push  无效果
const GetInit = withRouter(GridExample);

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imgGrid1: [],
            imgGrid2: [],
            imgGrid3: []
        }
    }
    created() {

    }
    componentWillMount() {
    }
    componentDidMount() {
        Http.get(API.GET_STARTLIST).then(res => {
            this.setState({
                imgGrid1: res
            })
        })
    }
    render() {
        return (
            <div className="home">
                <Search />
                <GetInit imgList={this.state.imgGrid1} text={'明星信息'} />
                <TarBar flag="blueTab" />
            </div>
        )
    }
}
